<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-emoji"></i> 自定义图标</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <h2>使用方法</h2>
            <p style="line-height: 50px;">
                直接通过设置类名为 el-icon-lx-iconName 来使用即可。例如：（共{{iconList.length}}个图标）
            </p>
            <p class="example-p">
                <i class="el-icon-lx-redpacket_fill" style="font-size: 30px;color: #ff5900"></i>
                <span>&lt;i class=&quot;el-icon-lx-redpacket_fill&quot;&gt;&lt;/i&gt;</span>
            </p>
            <p class="example-p">
                <i class="el-icon-lx-weibo" style="font-size: 30px;color:#fd5656"></i>
                <span>&lt;i class=&quot;el-icon-lx-weibo&quot;&gt;&lt;/i&gt;</span>
            </p>
            <p class="example-p">
                <i class="el-icon-lx-emojifill" style="font-size: 30px;color: #ffc300"></i>
                <span>&lt;i class=&quot;el-icon-lx-emojifill&quot;&gt;&lt;/i&gt;</span>
            </p>
            <br>
            <h2>图标</h2>
            <div class="search-box">
                <el-input class="search" clearable placeholder="请输入图标名称" size="large" v-model="keyword"></el-input>
            </div>
            <ul>
                <li :key="index" class="icon-li" v-for="(item,index) in list">
                    <div class="icon-li-content">
                        <i :class="`el-icon-lx-${item}`"></i>
                        <span>{{item}}</span>
                    </div>
                </li>
            </ul>
        </div>
    
    </div>
</template>

<script>
	export default {
		data: function () {
			return {
				keyword: '',
				iconList: [
					'attentionforbid',
					'attentionforbidfill',
					'attention',
					'attentionfill',
					'tag',
					'tagfill',
					'people',
					'peoplefill',
					'notice',
					'noticefill',
					'mobile',
					'mobilefill',
					'voice',
					'voicefill',
					'unlock',
					'lock',
					'home',
					'homefill',
					'delete',
					'deletefill',
					'notification',
					'notificationfill',
					'notificationforbidfill',
					'like',
					'likefill',
					'comment',
					'commentfill',
					'camera',
					'camerafill',
					'warn',
					'warnfill',
					'time',
					'timefill',
					'location',
					'locationfill',
					'favor',
					'favorfill',
					'skin',
					'skinfill',
					'news',
					'newsfill',
					'record',
					'recordfill',
					'emoji',
					'emojifill',
					'message',
					'messagefill',
					'goods',
					'goodsfill',
					'crown',
					'crownfill',
					'move',
					'add',
					'hot',
					'hotfill',
					'service',
					'servicefill',
					'present',
					'presentfill',
					'pic',
					'picfill',
					'rank',
					'rankfill',
					'male',
					'female',
					'down',
					'top',
					'recharge',
					'rechargefill',
					'forward',
					'forwardfill',
					'info',
					'infofill',
					'redpacket',
					'redpacket_fill',
					'roundadd',
					'roundaddfill',
					'friendadd',
					'friendaddfill',
					'cart',
					'cartfill',
					'more',
					'moreandroid',
					'back',
					'right',
					'shop',
					'shopfill',
					'question',
					'questionfill',
					'roundclose',
					'roundclosefill',
					'roundcheck',
					'roundcheckfill',
					'global',
					'mail',
					'punch',
					'exit',
					'upload',
					'read',
					'file',
					'link',
					'full',
					'group',
					'friend',
					'profile',
					'addressbook',
					'calendar',
					'text',
					'copy',
					'share',
					'wifi',
					'vipcard',
					'weibo',
					'remind',
					'refresh',
					'filter',
					'settings',
					'scan',
					'qrcode',
					'cascades',
					'apps',
					'sort',
					'searchlist',
					'search',
					'edit'
				]
			}
		},
		computed: {
			list () {
				return this.iconList.filter((item) => {
					return item.indexOf(this.keyword) !== - 1;
				})
			}
		}
	}
</script>

<style scoped>
    .example-p {
        height: 45px;
        display: flex;
        align-items: center;
    }
    
    .search-box {
        text-align: center;
        margin-top: 10px;
    }
    
    .search {
        width: 300px;
    }
    
    ul, li {
        list-style: none;
    }
    
    .icon-li {
        display: inline-block;
        padding: 10px;
        width: 120px;
        height: 120px;
    }
    
    .icon-li-content {
        display: flex;
        height: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    
    .icon-li-content i {
        font-size: 36px;
        color: #606266;
    }
    
    .icon-li-content span {
        margin-top: 10px;
        color: #787878;
    }
</style>
